Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / ColourPickerDropdown.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3v-click-outside=Ta5d6ff"{ handler: onClickOutsideMenu, capture: true }"

Te6edf3class=Ta5d6ff"cursor-default relative inline-block text-left"

Tff7b72>

T8b949e<!-- menu button -->

Tff7b72<div Te6edf3ref=Ta5d6ff"dropdown-button" @Te6edf3click.stop=Ta5d6ff"toggleMenu"Tff7b72>

Tff7b72<slotTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"size-8 border border-gray-300 dark:border-zinc-700 rounded-sm shadow-sm cursor-pointer"

Te6edf3:style=Ta5d6ff"{ 'background-color': colour }"

Tff7b72>Tff7b72</div>

Tff7b72</slot>

Tff7b72</div>

T8b949e<!-- drop down menu -->

Tff7b72<Transition

Te6edf3enter-active-class=Ta5d6ff"transition ease-out duration-100"

Te6edf3enter-from-class=Ta5d6ff"transform opacity-0 scale-95"

Te6edf3enter-to-class=Ta5d6ff"transform opacity-100 scale-100"

Te6edf3leave-active-class=Ta5d6ff"transition ease-in duration-75"

Te6edf3leave-from-class=Ta5d6ff"transform opacity-100 scale-100"

Te6edf3leave-to-class=Ta5d6ff"transform opacity-0 scale-95"

Tff7b72>

Tff7b72<div Te6edf3v-if=Ta5d6ff"isShowingMenu" Te6edf3class=Ta5d6ff"absolute left-0 z-100 mt-2"Tff7b72>

Tff7b72<v-color-picker

Te6edf3v-model=Ta5d6ff"colourPickerValue"

Te6edf3:modes=Ta5d6ff"['hex']"

hide-inputs

hide-sliders

show-swatches

Tff7b72>Tff7b72</v-color-picker>

Tff7b72</div>

Tff7b72</Transition>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

export default {

name: "ColourPickerDropdown",

props: {

colour: {

type: String,

default: "",

},

},

emits: ["update:colour"],

data() {

return {

isShowingMenu: false,

colourPickerValue: null,

};

},

watch: {

colour() {

// update internal colour picker value when parent changes value of v-model:colour

this.colourPickerValue = this.colour;

},

colourPickerValue() {

// get current colour picker value

var value = this.colourPickerValue;

// remove alpha channel from hex colour if present

if (value.length === 9) {

value = value.substring(0, 7);

}

// fire v-model:colour update event

this.$emit("update:colour", value);

},

},

methods: {

toggleMenu() {

if (this.isShowingMenu) {

this.hideMenu();

} else {

this.showMenu();

}

},

showMenu() {

this.isShowingMenu = true;

},

hideMenu() {

this.isShowingMenu = false;

},

onClickOutsideMenu(event) {

if (this.isShowingMenu) {

event.preventDefault();

this.hideMenu();

}

},

},

};

Tff7b72</script>